<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入的css文件  -->
<!--<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-table/dist/bootstrap-table.min.css"-->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
<script src="https://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/bstable/bootstrap.min.js"></script>
<script src="/js/bstable/bootstrap-table.js"></script>
<script src="/js/bstable/bootstrap-table-zh-CN.js"></script>

<script>
    $(function () {
        initTable();
    })
    function initTable() {

        var url = "/findAll";

        $('#table').bootstrapTable({
            method:'GET',
            dataType:'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            // sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url:url,
            pagination:true,
            search:true,
            queryParams : function(params){
                return params
            },
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 2,                       //每页的记录行数（*）
            pageList: [2, 4, 6, 8],       //可供选择的每页的行数（*）
            columns: [
                {
                    checkbox:true,
                },
                {
                    title: 'ID',
                    field: 'id',
                    sortable: true
                }, {
                    title: '照片',
                    field: 'img',
                    align : 'center',
                    width: 200, // 定义列的宽度，单位为像素px
                    detailView : true,
                    formatter : function (value, row, index) {
                        return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>"
                    }

                }, {
                    title: '姓名',
                    field: 'name',
                    sortable: true
                }, {
                    title: '性别',
                    field: 'sex'
                }, {
                    title: '年龄',
                    field: 'age',
                    /*formatter : formatSex,//对返回的数据进行处理再显示*/
                }, {
                    title: '出生日期',
                    field: 'birthday',
                    /*formatter : operation,//对资源进行操作*/
                }, {
                    title: '身高',
                    field: 'height',
                }, {
                    title: '体重',
                    field: 'weight',
                }, {
                    title: '证件号码',
                    field: 'number',
                }, {
                    title: '学号',
                    field: 'student',
                }, {
                    title: '左右手',
                    field: 'hand',
                }, {
                    title: '场上位置',
                    field: 'location',
                }, {
                    title: '正面照片',
                    field: 'frout',
                    align : 'center',
                    width: 200, // 定义列的宽度，单位为像素px
                    detailView : true,
                    formatter : function (value, row, index) {
                        return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>"
                    }
                }, {
                    title: '反面照片',
                    field: 'side',
                    align : 'center',
                    width: 200, // 定义列的宽度，单位为像素px
                    detailView : true,
                    formatter : function (value, row, index) {
                        return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>"
                    }
                }, {
                    title: '户口本照片',
                    field: 'book',
                    align : 'center',
                    width: 200, // 定义列的宽度，单位为像素px
                    detailView : true,
                    formatter : function (value, row, index) {
                        return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>"
                    }
                },{
                    title: '协议年限',
                    field: 'year1',
                    /* formatter : formatSex,//对返回的数据进行处理再显示*/
                }, {
                    title: '协议年限',
                    field: 'year2',
                    /* formatter : formatSex,//对返回的数据进行处理再显示*/
                },{
                    title: '状态',
                    field: 'status',
                    /* formatter : formatSex,//对返回的数据进行处理再显示*/
                }, {
                    title: '操作',
                    field: '',
                    formatter : function (value, row, index) {
                        return "<a href='#'>年度确认</a>"
                    }
                }]
        });
    }
</script>
<body>

<div>
    <td COLSPAN="17">
    <td><a href="/inserthtml"><button>运动员注册</button></a></td>
        <table id="table" border="1" class="table table-striped">
        </table>
    </td>
</div>
</body>
</html>


